<template>
	<view class="faqPages bg-fff">
        <view class="searhBox">
            <u-search placeholder="搜索问答" :focus="focus" input-align="canter" v-model="keywords" :clearabled="true" action-text="取消" @change="changeInput"></u-search>
        </view>
		<view class="faqContentBox">
            <block v-if="list.length > 0">
                <block v-for="(item,index) in list" :key="index">
                    <question-item :item="item" :index="index" @thumbSucc="thumbCallBack" @collectSucc="collectCallBack"></question-item>
                </block>
                <up-loadmore :status="loadingType" margin-top="30" />
            </block>

			<up-empty mode="list" text="没有更多了" marginTop="100" v-if="loadingType === 'nomore'"></up-empty>
		</view>
	</view>
</template>
<script>
	import { mapState } from 'pinia';
    import { useIndexStore } from '@/store/index';

	export default {
		components: {
		},
		data() {
			return {
				keywords: '',
                focus: true,
				next: '',
				loadingType: 'loadmore',
				list: []
			};
		},
		computed: {
			...mapState(useIndexStore, ['nowCityCode'])
		},
		
		onLoad(options) {
		},
		onReachBottom(){
			this.loadData()
		},
		methods: {
            //重置
			reset(){
				this.list = [];
				this.next = '';
				this.loadingType = 'loadmore';
			},
            
            //加载请求
			loadData(reset=false){
                if(reset) {
                    this.reset()
                }
				if(this.loadingType === 'loading' || this.loadingType === 'nomore') return;
				this.loadingType = 'loading';
				let reqData;
				let that = this;
				if(this.next == '' || this.list.length == 0){
					reqData = {
						url: `/product/mall/qa/v2/find?city=${this.nowCityCode}&query=${this.keywords}`
					}
				}else{
					reqData = {
						url: this.next
					}
				}
				this.$api.request(reqData).then(data => {
					if(data.status == 0){
						let detail = data.detail
						if (detail.results.length > 0){
							detail.results.forEach(item=>{
								that.list.push(item)
							})
						}
						that.next = detail.next;
						if(that.next){
							that.loadingType = 'loadmore';
						}else{
							that.loadingType = 'nomore';
						}
					}else{
						uni.$u.toast(data.detail);
					}
					uni.stopPullDownRefresh();
				})
			},
            
            //输入关键字
            changeInput(e) {
                const that = this;
                this.$u.throttle(function() {
                    that.loadData(true);
                }, 200)
            },
            
            //点赞回调
            thumbCallBack(index) {
                let currFAQ = this.list[index];
                currFAQ.love?currFAQ.like_num--:currFAQ.like_num++;
                currFAQ.love = !currFAQ.love;
            },
            
            //收藏回调
            collectCallBack(index) {
                let currFAQ = this.list[index];
                currFAQ.store?currFAQ.store_num--:currFAQ.store_num++;
                currFAQ.store = !currFAQ.store;
            }
		}
	}
</script>

<style scoped lang="scss">
	.faqPages{
        padding: 28rpx;
        min-height: 100vh;
        line-height: 1;
	}
</style>
